<!DOCTYPE html>
<html lang="en" class="scrollbar" ondragstart="return false" onselectstart="return false">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS堆叠卡片轮播图</title>
    <link rel="stylesheet" href="css/index.css">
    <style>
        .link-to-doc {
            position: fixed;
            right: 100px;
            top: 100px;
            z-index: 100000000;
            padding: 14px 30px;

            background-color: #fff;
            border-radius: 1rem;
            cursor: pointer;
        }

        a {
            color: #222;
            font-size: 1.8rem;
        }


    </style>
</head>

<body id="body">

    <aside class="link-to-doc">
        <a href="https://gejiuyuan.gitee.io/js-dui-die-qia-pian-lun-bo-tu-shi-yong-shuo-ming/" target="_blank">
            查看使用说明文档
        </a>
    </aside>

    <div class="site">

        <div class="wrapper horizontal demo1">
            <h3>Demo 1</h3>

            <div class="demo1-tip">
                当前显示的是第
                <span class="active-index">
                    1
                </span>
                张
            </div>

            <ul class="container">

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p1.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">醉刘的摄影狮</h4>

                        <p class="content">
                            准旗舰游戏拍照手机魅族 X8，不止有实力，还有最美刘海屏！
                        </p>

                        <p class="label">魅族 X8</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p2.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">屌丝扮海绵</h4>

                        <p class="content">

                            “窗含西岭千秋雪” 魅族 16th 用旗舰双摄带你领略诗句中的美景。
                        </p>

                        <p class="label">魅族 16th</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p3.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">郑金龙</h4>

                        <p class="content">

                            千元最强性能手机登场，高通骁龙 710 次旗舰级处理器加持，玩王者荣耀 Vulkan 模式请认准魅族 X8。

                        </p>

                        <p class="label">魅族 X8</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p4.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">歩惊云</h4>

                        <p class="content">
                            这款匠心精神打造的十五周年旗舰机，再不下手就要后悔啦~
                        </p>

                        <p class="label">魅族 15</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p5.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">Keicy520</h4>

                        <p class="content">
                            妙用 Flyme 分身，做生活和工作的「两面派」。
                        </p>

                        <p class="label">功能解析</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p6.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">小墨灰</h4>

                        <p class="content">
                            工作和学习中的沟通总离不开邮件，而 Flyme 邮箱的出色体验为我们带来的不只是生产力。
                        </p>

                        <p class="label">功能解析</p>

                    </div>

                </li>

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p7.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">xrx3p</h4>

                        <p class="content">
                            摄影离不开适当的后期，好在如今你可以在魅族手机上轻松完成操作。
                        </p>

                        <p class="label">摄影技巧</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p8.png" alt="">

                    </div>

                    <div class="main-con">

                        <h4 class="name">hooyeah</h4>

                        <p class="content">
                            魅族 Note9 邀请函 JK 服妹子出镜，谁才是最美游戏姬？
                        </p>

                        <p class="label">魅族 Note9</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p9.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">不腻映像 </h4>

                        <p class="content">
                            轻奢旗舰魅族 16 X 惊艳亮相!经典汝窑白配色与小姐姐更搭哦~
                        </p>

                        <p class="label">魅族16X</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p10.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">小墨灰</h4>

                        <p class="content">
                            做为一家讲究用户极致体验的手机厂商，魅族对于系统输入法依然费尽心思打磨。
                        </p>

                        <p class="label">魅族输入法功能解析</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p11.png" alt="">

                    </div>

                    <div class="main-con">

                        <h4 class="name">王员外可爱多</h4>

                        <p class="content">
                            从「青年良品」到「国民拍照手机」，Note 系列依旧是最值得购买的千元机。
                        </p>

                        <p class="label">魅族 Note8</p>

                    </div>

                </li>

            </ul>

            <ul class='navigation'>
                <li class="dot"></li>
                <li class="dot"></li>
                <li class="dot"></li>
                <li class="dot"></li>
                <li class="dot"></li>
                <li class="dot"></li>
                <li class="dot"></li>
                <li class="dot"></li>
                <li class="dot"></li>
                <li class="dot"></li>
                <li class="dot"></li>
            </ul>

            <i class="btn-direct btn-left">

                <span class="shift-left"></span>

            </i>
            <i class="btn-direct btn-right">

                <span class="shift-right"></span>

            </i>

        </div>

        <div class="wrapper vertical demo2">
            <h3>Demo 2</h3>
            <ul class="container">

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p1.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">醉刘的摄影狮</h4>

                        <p class="content">
                            准旗舰游戏拍照手机魅族 X8，不止有实力，还有最美刘海屏！
                        </p>

                        <p class="label">魅族 X8</p>

                    </div>
                </li>

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p2.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">屌丝扮海绵</h4>

                        <p class="content">

                            “窗含西岭千秋雪” 魅族 16th 用旗舰双摄带你领略诗句中的美景。
                        </p>

                        <p class="label">魅族 16th</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p3.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">郑金龙</h4>

                        <p class="content">

                            千元最强性能手机登场，高通骁龙 710 次旗舰级处理器加持，玩王者荣耀 Vulkan 模式请认准魅族 X8。

                        </p>

                        <p class="label">魅族 X8</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p4.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">歩惊云</h4>

                        <p class="content">
                            这款匠心精神打造的十五周年旗舰机，再不下手就要后悔啦~
                        </p>

                        <p class="label">魅族 15</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p5.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">Keicy520</h4>

                        <p class="content">
                            妙用 Flyme 分身，做生活和工作的「两面派」。
                        </p>

                        <p class="label">功能解析</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p6.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">小墨灰</h4>

                        <p class="content">
                            工作和学习中的沟通总离不开邮件，而 Flyme 邮箱的出色体验为我们带来的不只是生产力。
                        </p>

                        <p class="label">功能解析</p>

                    </div>

                </li>

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p7.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">xrx3p</h4>

                        <p class="content">
                            摄影离不开适当的后期，好在如今你可以在魅族手机上轻松完成操作。
                        </p>

                        <p class="label">摄影技巧</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p8.png" alt="">

                    </div>

                    <div class="main-con">

                        <h4 class="name">hooyeah</h4>

                        <p class="content">
                            魅族 Note9 邀请函 JK 服妹子出镜，谁才是最美游戏姬？
                        </p>

                        <p class="label">魅族 Note9</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p9.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">不腻映像 </h4>

                        <p class="content">
                            轻奢旗舰魅族 16 X 惊艳亮相!经典汝窑白配色与小姐姐更搭哦~
                        </p>

                        <p class="label">魅族16X</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p10.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">小墨灰</h4>

                        <p class="content">
                            做为一家讲究用户极致体验的手机厂商，魅族对于系统输入法依然费尽心思打磨。
                        </p>

                        <p class="label">魅族输入法功能解析</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p11.png" alt="">

                    </div>

                    <div class="main-con">

                        <h4 class="name">王员外可爱多</h4>

                        <p class="content">
                            从「青年良品」到「国民拍照手机」，Note 系列依旧是最值得购买的千元机。
                        </p>

                        <p class="label">魅族 Note8</p>

                    </div>

                </li>

            </ul>

            <i class="btn-direct btn-left">

                <span class="shift-left"></span>

            </i>
            <i class="btn-direct btn-right">

                <span class="shift-right"></span>

            </i>

        </div>

        <div class="wrapper horizontal demo3">
            <h3>Demo 3</h3>

            <ul class="container">

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p1.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">醉刘的摄影狮</h4>

                        <p class="content">
                            准旗舰游戏拍照手机魅族 X8，不止有实力，还有最美刘海屏！
                        </p>

                        <p class="label">魅族 X8</p>

                    </div>
                </li>

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p2.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">屌丝扮海绵</h4>

                        <p class="content">

                            “窗含西岭千秋雪” 魅族 16th 用旗舰双摄带你领略诗句中的美景。
                        </p>

                        <p class="label">魅族 16th</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p3.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">郑金龙</h4>

                        <p class="content">

                            千元最强性能手机登场，高通骁龙 710 次旗舰级处理器加持，玩王者荣耀 Vulkan 模式请认准魅族 X8。

                        </p>

                        <p class="label">魅族 X8</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p4.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">歩惊云</h4>

                        <p class="content">
                            这款匠心精神打造的十五周年旗舰机，再不下手就要后悔啦~
                        </p>

                        <p class="label">魅族 15</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p5.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">Keicy520</h4>

                        <p class="content">
                            妙用 Flyme 分身，做生活和工作的「两面派」。
                        </p>

                        <p class="label">功能解析</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p6.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">小墨灰</h4>

                        <p class="content">
                            工作和学习中的沟通总离不开邮件，而 Flyme 邮箱的出色体验为我们带来的不只是生产力。
                        </p>

                        <p class="label">功能解析</p>

                    </div>

                </li>

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p7.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">xrx3p</h4>

                        <p class="content">
                            摄影离不开适当的后期，好在如今你可以在魅族手机上轻松完成操作。
                        </p>

                        <p class="label">摄影技巧</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p8.png" alt="">

                    </div>

                    <div class="main-con">

                        <h4 class="name">hooyeah</h4>

                        <p class="content">
                            魅族 Note9 邀请函 JK 服妹子出镜，谁才是最美游戏姬？
                        </p>

                        <p class="label">魅族 Note9</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p9.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">不腻映像 </h4>

                        <p class="content">
                            轻奢旗舰魅族 16 X 惊艳亮相!经典汝窑白配色与小姐姐更搭哦~
                        </p>

                        <p class="label">魅族16X</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p10.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">小墨灰</h4>

                        <p class="content">
                            做为一家讲究用户极致体验的手机厂商，魅族对于系统输入法依然费尽心思打磨。
                        </p>

                        <p class="label">魅族输入法功能解析</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p11.png" alt="">

                    </div>

                    <div class="main-con">

                        <h4 class="name">王员外可爱多</h4>

                        <p class="content">
                            从「青年良品」到「国民拍照手机」，Note 系列依旧是最值得购买的千元机。
                        </p>

                        <p class="label">魅族 Note8</p>

                    </div>

                </li>

            </ul>

            <i class="btn-direct btn-left">

                <span class="shift-left"></span>

            </i>
            <i class="btn-direct btn-right">

                <span class="shift-right"></span>

            </i>

        </div>

        <div class="wrapper horizontal demo4">
            <h3>Demo 4</h3>

            <ul class="container">

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p1.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">醉刘的摄影狮</h4>

                        <p class="content">
                            准旗舰游戏拍照手机魅族 X8，不止有实力，还有最美刘海屏！
                        </p>

                        <p class="label">魅族 X8</p>

                    </div>
                </li>

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p2.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">屌丝扮海绵</h4>

                        <p class="content">

                            “窗含西岭千秋雪” 魅族 16th 用旗舰双摄带你领略诗句中的美景。
                        </p>

                        <p class="label">魅族 16th</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p3.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">郑金龙</h4>

                        <p class="content">

                            千元最强性能手机登场，高通骁龙 710 次旗舰级处理器加持，玩王者荣耀 Vulkan 模式请认准魅族 X8。

                        </p>

                        <p class="label">魅族 X8</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p4.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">歩惊云</h4>

                        <p class="content">
                            这款匠心精神打造的十五周年旗舰机，再不下手就要后悔啦~
                        </p>

                        <p class="label">魅族 15</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p5.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">Keicy520</h4>

                        <p class="content">
                            妙用 Flyme 分身，做生活和工作的「两面派」。
                        </p>

                        <p class="label">功能解析</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p6.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">小墨灰</h4>

                        <p class="content">
                            工作和学习中的沟通总离不开邮件，而 Flyme 邮箱的出色体验为我们带来的不只是生产力。
                        </p>

                        <p class="label">功能解析</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p7.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">xrx3p</h4>

                        <p class="content">
                            摄影离不开适当的后期，好在如今你可以在魅族手机上轻松完成操作。
                        </p>

                        <p class="label">摄影技巧</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p8.png" alt="">

                    </div>

                    <div class="main-con">

                        <h4 class="name">hooyeah</h4>

                        <p class="content">
                            魅族 Note9 邀请函 JK 服妹子出镜，谁才是最美游戏姬？
                        </p>

                        <p class="label">魅族 Note9</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p9.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">不腻映像 </h4>

                        <p class="content">
                            轻奢旗舰魅族 16 X 惊艳亮相!经典汝窑白配色与小姐姐更搭哦~
                        </p>

                        <p class="label">魅族16X</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p10.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">小墨灰</h4>

                        <p class="content">
                            做为一家讲究用户极致体验的手机厂商，魅族对于系统输入法依然费尽心思打磨。
                        </p>

                        <p class="label">魅族输入法功能解析</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p11.png" alt="">

                    </div>

                    <div class="main-con">

                        <h4 class="name">王员外可爱多</h4>

                        <p class="content">
                            从「青年良品」到「国民拍照手机」，Note 系列依旧是最值得购买的千元机。
                        </p>

                        <p class="label">魅族 Note8</p>

                    </div>

                </li>

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p6.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">小墨灰</h4>

                        <p class="content">
                            工作和学习中的沟通总离不开邮件，而 Flyme 邮箱的出色体验为我们带来的不只是生产力。
                        </p>

                        <p class="label">功能解析</p>

                    </div>

                </li>

            </ul>
            <i class="btn-direct btn-left">

                <span class="shift-left"></span>

            </i>
            <i class="btn-direct btn-right">

                <span class="shift-right"></span>

            </i>

        </div>

        <div class="wrapper horizontal demo5">
            <h3>Demo 5</h3>

            <ul class="container">

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p1.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">醉刘的摄影狮</h4>

                        <p class="content">
                            准旗舰游戏拍照手机魅族 X8，不止有实力，还有最美刘海屏！
                        </p>

                        <p class="label">魅族 X8</p>

                    </div>
                </li>

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p2.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">屌丝扮海绵</h4>

                        <p class="content">

                            “窗含西岭千秋雪” 魅族 16th 用旗舰双摄带你领略诗句中的美景。
                        </p>

                        <p class="label">魅族 16th</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p3.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">郑金龙</h4>

                        <p class="content">

                            千元最强性能手机登场，高通骁龙 710 次旗舰级处理器加持，玩王者荣耀 Vulkan 模式请认准魅族 X8。

                        </p>

                        <p class="label">魅族 X8</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p4.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">歩惊云</h4>

                        <p class="content">
                            这款匠心精神打造的十五周年旗舰机，再不下手就要后悔啦~
                        </p>

                        <p class="label">魅族 15</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p5.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">Keicy520</h4>

                        <p class="content">
                            妙用 Flyme 分身，做生活和工作的「两面派」。
                        </p>

                        <p class="label">功能解析</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p6.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">小墨灰</h4>

                        <p class="content">
                            工作和学习中的沟通总离不开邮件，而 Flyme 邮箱的出色体验为我们带来的不只是生产力。
                        </p>

                        <p class="label">功能解析</p>

                    </div>

                </li>

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p7.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">xrx3p</h4>

                        <p class="content">
                            摄影离不开适当的后期，好在如今你可以在魅族手机上轻松完成操作。
                        </p>

                        <p class="label">摄影技巧</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p8.png" alt="">

                    </div>

                    <div class="main-con">

                        <h4 class="name">hooyeah</h4>

                        <p class="content">
                            魅族 Note9 邀请函 JK 服妹子出镜，谁才是最美游戏姬？
                        </p>

                        <p class="label">魅族 Note9</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p9.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">不腻映像 </h4>

                        <p class="content">
                            轻奢旗舰魅族 16 X 惊艳亮相!经典汝窑白配色与小姐姐更搭哦~
                        </p>

                        <p class="label">魅族16X</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p10.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">小墨灰</h4>

                        <p class="content">
                            做为一家讲究用户极致体验的手机厂商，魅族对于系统输入法依然费尽心思打磨。
                        </p>

                        <p class="label">魅族输入法功能解析</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p11.png" alt="">

                    </div>

                    <div class="main-con">

                        <h4 class="name">王员外可爱多</h4>

                        <p class="content">
                            从「青年良品」到「国民拍照手机」，Note 系列依旧是最值得购买的千元机。
                        </p>

                        <p class="label">魅族 Note8</p>

                    </div>

                </li>

            </ul>
            <i class="btn-direct btn-left">

                <span class="shift-left"></span>

            </i>
            <i class="btn-direct btn-right">

                <span class="shift-right"></span>

            </i>

        </div>

        <div class="wrapper horizontal demo6">
            <h3>Demo 6</h3>

            <ul class="container">

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p1.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">醉刘的摄影狮</h4>

                        <p class="content">
                            准旗舰游戏拍照手机魅族 X8，不止有实力，还有最美刘海屏！
                        </p>

                        <p class="label">魅族 X8</p>

                    </div>
                </li>

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p2.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">屌丝扮海绵</h4>

                        <p class="content">

                            “窗含西岭千秋雪” 魅族 16th 用旗舰双摄带你领略诗句中的美景。
                        </p>

                        <p class="label">魅族 16th</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p3.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">郑金龙</h4>

                        <p class="content">

                            千元最强性能手机登场，高通骁龙 710 次旗舰级处理器加持，玩王者荣耀 Vulkan 模式请认准魅族 X8。

                        </p>

                        <p class="label">魅族 X8</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p4.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">歩惊云</h4>

                        <p class="content">
                            这款匠心精神打造的十五周年旗舰机，再不下手就要后悔啦~
                        </p>

                        <p class="label">魅族 15</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p5.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">Keicy520</h4>

                        <p class="content">
                            妙用 Flyme 分身，做生活和工作的「两面派」。
                        </p>

                        <p class="label">功能解析</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p6.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">小墨灰</h4>

                        <p class="content">
                            工作和学习中的沟通总离不开邮件，而 Flyme 邮箱的出色体验为我们带来的不只是生产力。
                        </p>

                        <p class="label">功能解析</p>

                    </div>

                </li>

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p7.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">xrx3p</h4>

                        <p class="content">
                            摄影离不开适当的后期，好在如今你可以在魅族手机上轻松完成操作。
                        </p>

                        <p class="label">摄影技巧</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p8.png" alt="">

                    </div>

                    <div class="main-con">

                        <h4 class="name">hooyeah</h4>

                        <p class="content">
                            魅族 Note9 邀请函 JK 服妹子出镜，谁才是最美游戏姬？
                        </p>

                        <p class="label">魅族 Note9</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p9.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">不腻映像 </h4>

                        <p class="content">
                            轻奢旗舰魅族 16 X 惊艳亮相!经典汝窑白配色与小姐姐更搭哦~
                        </p>

                        <p class="label">魅族16X</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p10.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">小墨灰</h4>

                        <p class="content">
                            做为一家讲究用户极致体验的手机厂商，魅族对于系统输入法依然费尽心思打磨。
                        </p>

                        <p class="label">魅族输入法功能解析</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p11.png" alt="">

                    </div>

                    <div class="main-con">

                        <h4 class="name">王员外可爱多</h4>

                        <p class="content">
                            从「青年良品」到「国民拍照手机」，Note 系列依旧是最值得购买的千元机。
                        </p>

                        <p class="label">魅族 Note8</p>

                    </div>

                </li>

            </ul>
            <i class="btn-direct btn-left">

                <span class="shift-left"></span>

            </i>
            <i class="btn-direct btn-right">

                <span class="shift-right"></span>

            </i>
        </div>

        <div class="wrapper horizontal demo7">
            <h3>Demo 7</h3>

            <ul class="container">

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p1.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">醉刘的摄影狮</h4>

                        <p class="content">
                            准旗舰游戏拍照手机魅族 X8，不止有实力，还有最美刘海屏！
                        </p>

                        <p class="label">魅族 X8</p>

                    </div>
                </li>

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p2.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">屌丝扮海绵</h4>

                        <p class="content">

                            “窗含西岭千秋雪” 魅族 16th 用旗舰双摄带你领略诗句中的美景。
                        </p>

                        <p class="label">魅族 16th</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p3.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">郑金龙</h4>

                        <p class="content">

                            千元最强性能手机登场，高通骁龙 710 次旗舰级处理器加持，玩王者荣耀 Vulkan 模式请认准魅族 X8。

                        </p>

                        <p class="label">魅族 X8</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p4.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">歩惊云</h4>

                        <p class="content">
                            这款匠心精神打造的十五周年旗舰机，再不下手就要后悔啦~
                        </p>

                        <p class="label">魅族 15</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p5.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">Keicy520</h4>

                        <p class="content">
                            妙用 Flyme 分身，做生活和工作的「两面派」。
                        </p>

                        <p class="label">功能解析</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p6.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">小墨灰</h4>

                        <p class="content">
                            工作和学习中的沟通总离不开邮件，而 Flyme 邮箱的出色体验为我们带来的不只是生产力。
                        </p>

                        <p class="label">功能解析</p>

                    </div>

                </li>

                <li class="cards-list">

                    <div class="img">

                        <img src="image/p7.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">xrx3p</h4>

                        <p class="content">
                            摄影离不开适当的后期，好在如今你可以在魅族手机上轻松完成操作。
                        </p>

                        <p class="label">摄影技巧</p>

                    </div>
                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p8.png" alt="">

                    </div>

                    <div class="main-con">

                        <h4 class="name">hooyeah</h4>

                        <p class="content">
                            魅族 Note9 邀请函 JK 服妹子出镜，谁才是最美游戏姬？
                        </p>

                        <p class="label">魅族 Note9</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p9.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">不腻映像 </h4>

                        <p class="content">
                            轻奢旗舰魅族 16 X 惊艳亮相!经典汝窑白配色与小姐姐更搭哦~
                        </p>

                        <p class="label">魅族16X</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p10.png" alt="">

                    </div>
                    <div class="main-con">

                        <h4 class="name">小墨灰</h4>

                        <p class="content">
                            做为一家讲究用户极致体验的手机厂商，魅族对于系统输入法依然费尽心思打磨。
                        </p>

                        <p class="label">魅族输入法功能解析</p>

                    </div>

                </li>
                <li class="cards-list">

                    <div class="img">

                        <img src="image/p11.png" alt="">

                    </div>

                    <div class="main-con">

                        <h4 class="name">王员外可爱多</h4>

                        <p class="content">
                            从「青年良品」到「国民拍照手机」，Note 系列依旧是最值得购买的千元机。
                        </p>

                        <p class="label">魅族 Note8</p>

                    </div>

                </li>

            </ul>
            <i class="btn-direct btn-left">

                <span class="shift-left"></span>

            </i>
            <i class="btn-direct btn-right">

                <span class="shift-right"></span>

            </i>
        </div>

    </div>

    <script src="./js/empile.js"></script>
    <script src="./js/index.js"></script>


</body>

</html>